<template>
	<view class="content">
		<u-navbar :is-back="false" :is-fixed="true" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<image :src="navBackIcon" mode="" @click="back"></image>
				<view class="navTitle">{{navTitle}}</view>
				<view style="width: 56rpx; height: 56rpx"></view>
			</view>
		</u-navbar>
		<view style="position: absolute;top: 0; width: 100%;">
			<image src="https://dm.static.elab-plus.com/csc20201001/cqts-1%402x.png"  mode="widthFix" style="width: 750rpx;height: 1162rpx;"></image>
			<view class="videoContent">
				<video class="video" id="myVideo" src="https://dm.static.elab-plus.com/csc20201001/cqts-video.mp4" autoplay object-fit="cover" :controls="false" :muted="true" @play="isShowCover=false"></video>
				<!-- #ifndef MP-TOUTIAO -->
				<cover-image v-if="isShowCover" class="video" :src="videoCoverUrl" mode=""></cover-image>
				<!-- #endif -->
				<!-- #ifdef MP-TOUTIAO -->
				<image v-if="isShowCover" class="video" :src="videoCoverUrl" mode=""></image>
				<!-- #endif -->
			</view>
			<image src="https://dm.static.elab-plus.com/csc20201001/cqts-2%402x.png" mode="widthFix"></image>
			<image src="https://dm.static.elab-plus.com/csc20201001/cqts-3%402x.png" mode="widthFix"></image>
			<view class="videoContent">
				<video class="video" id="myVideo1" src="https://dm.static.elab-plus.com/csc20201001/cqts-jj-video.m4v" autoplay object-fit="cover" :controls="false" :muted="true" @play="isShowJJCover=false"></video>
				<!-- #ifndef MP-TOUTIAO -->
				<cover-image v-if="isShowJJCover" class="video" src="https://dm.static.elab-plus.com/csc20201001/cqts-jj-video-cover.png" mode=""></cover-image>
				<!-- #endif -->
				<!-- #ifdef MP-TOUTIAO -->
				<image v-if="isShowCover" class="video" src="https://dm.static.elab-plus.com/csc20201001/cqts-jj-video-cover.png" mode=""></image>
				<!-- #endif -->
			</view>
			<image src="https://dm.static.elab-plus.com/csc20201001/cqts-4%402x.png" mode="widthFix"></image>
			<image src="https://dm.static.elab-plus.com/csc20201001/cqts-5%402x.png" mode="widthFix"></image>
			<view class="swiperContent">
				<swiper class="swiper" :indicator-dots="true" indicator-color="rgba(255,255,255,0.4)" indicator-active-color="#FFF" :autoplay="true" :interval="2000" :duration="500">
				    <swiper-item  v-for="(item,index) in items" :key="index" style="border-radius: 8rpx;">
				        <image :src="item" mode="widthFix"></image>
				    </swiper-item> 
				</swiper>                    
			</view>
			<share currProject="cqts"></share>
		</view>
	</view>
</template>

<script>
	import Share from "../../components/share/share.vue"
	export default {
		data() {
			return {
				title: 'Hello',			
				background: {
					backgroundColor: 'clear',
				},
				isShowCover: true,
				isShowJJCover: true,
				videoCoverUrl:'https://dm.static.elab-plus.com/csc20201001/cqts-video-cover.png',
				items:[
					"https://dm.static.elab-plus.com/csc20201001/cqts-1.png",
					"https://dm.static.elab-plus.com/csc20201001/cqts-2.png",
					"https://dm.static.elab-plus.com/csc20201001/cqts-3.png",
					"https://dm.static.elab-plus.com/csc20201001/cqts-4.png",
					"https://dm.static.elab-plus.com/csc20201001/cqts-5.png",
					"https://dm.static.elab-plus.com/csc20201001/cqts-6.png",
					"https://dm.static.elab-plus.com/csc20201001/cqts-7.png",
				],
				tabOpacity: 0,
				navBackIcon:'../../static/back_icon.png',
				navTitle:''
			}
		},
		onLoad(options) {
		},
		methods: {
			back(){
				this.customNavBack();
			},
		},
		// 原代码
		onPageScroll(res) {
			const scrollTop = res.scrollTop;
			const { windowWidth, windowHeight,statusBarHeight } = uni.getSystemInfoSync();	
			if(scrollTop > 0){
				if(scrollTop<=50){
					this.background.backgroundColor = "clear"
					this.navBackIcon = "../../static/back_icon.png"
					this.navTitle = ''
				}else if(50<scrollTop&&scrollTop<=100){
					this.tabOpacity = scrollTop/100
					this.background.backgroundColor = `rgba(255,255,255,${this.tabOpacity})`
					this.navBackIcon = "../../static/nav-back-black.png"
					this.navTitle = '重庆天空森林城市'
				}else if(scrollTop>100){
					this.background.backgroundColor = "#FFFFFF"
					this.navBackIcon = "../../static/nav-back-black.png"
					this.navTitle = '重庆天空森林城市'
				}
			}
		},
		onShareAppMessage(res) {
			return {
				title: "Elab柔性开发以需定产",
				path: '',
				imageUrl: 'https://dm.static.elab-plus.com/csc20201001/cqts-share.png'
			}	
		},	
		components:{"share" : Share},
	}
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		image {
			width: 100%;
		}
		.videoContent {
			margin-left: 20rpx;
			margin-top: -400rpx;
			width: 710rpx;
			height: 400rpx;
			position: relative;
			.video {
				width: 100%;
				height: 400rpx;
				border-radius: 8rpx;
				border: 2rpx solid #FFF;
				box-sizing: border-box;
			}
			cover-image {
				width: 100%;
				height: 400rpx;
				position: absolute;
				left: 0;
				top: 0;
			}
			image {
				width: 100%;
				height: 400rpx;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		.swiperContent {
			width: 710rpx;
			height: 400rpx;
			margin-top: -400rpx;
			margin-left: 20rpx;
			// background: #007AFF;
			z-index: 100;
			.swiper {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
				image{
					width: 100%;
					height: 100%;
					// background: #007AFF;
					border-radius: 8rpx;
				}
			}
		}
	}
	.slot-wrap {
		width: 750rpx;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		justify-content: space-between;
		box-sizing: border-box;
		image {
			width: 56rpx;
			height: 56rpx;
		}
		.navTitle {
			font-size: 32rpx;
			font-weight: 400;
		}
	}
</style>
